<template>
  <div class="tree-wrap tree-line">
	<el-input
		v-model="filterText"
		style="width: calc(100%); margin-bottom: 6px;"
		:placeholder="placeholder"
		size="small"
	/>
    <el-tree
      class="cur-tree"
      ref="treeRef"
      highlight-current
      style="max-width: 600px"
      :data="treeData"
      node-key="id"
	  :default-expanded-keys="[1]"
	  :expand-on-click-node="false"
	  :filter-node-method="filterNode"
      :props="defaultProps"
    />
  </div>
</template>

<script lang="ts" setup>
const defaultProps = {
  children: 'children',
  label: 'label',
}
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>()
interface Props {
	treeData?: any[]; // 树数据
	placeholder?: string;
}
const props = withDefaults(defineProps<Props>(), {
	treeData: () => [],
	placeholder: '请输入'
});

const onQueryChanged = () => {

}
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
</script>
<style lang="scss">
.tree-wrap{
	width: 200px;
	max-width: 200px;
	height: 100%;
	background: #fff;
	padding: 10px 6px;
	border-radius: 5px;
}
// 强制清除掉子节点的padding-left的值，让虚线对齐
.tree-line .el-tree-node__content {
  padding-left: 0 !important;
}
// 虚线所需样式
.tree-line {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node__children {
    .el-tree-node {
      position: relative;
      padding-left: 16px;
    }
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 44px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #e6e6e6;
    bottom: 0px;
    height: 100%;
    top: -32px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #e6e6e6;
    height: 20px;
    top: 12px;
    width: 20px;
  }
}
</style>
